<template>
  <Fragment>
    <div class="head-wrap borderBottom-1px">
      <div class="title left borderBottom-2px">{{title}}</div>
      <div class="operate right"> <!---(item.id,curId)-->
        <span @click="changeTab(item.id)" v-for="(item,index) in items" :key="item.id" :class="{active : index===curId}">{{item.label}}</span>
      </div>
    </div>
    <div class="content-wrap">
      <div v-if="curId===0" class="chart-content" ref="revenueTrendStatistics1">
        2019
      </div>
      <div v-if="curId===1" class="chart-content" ref="revenueTrendStatistics2">
        2020
      </div>
      <div v-if="curId===2" class="chart-content" ref="revenueTrendStatistics3">
        2021
      </div>
      <div v-if="curId===3" class="chart-content" ref="revenueTrendStatistics4">
        2022
      </div>
    </div>
    <img src="@/assets/images/card819.png" class="card819" alt="">
  </Fragment>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill'

import { Fragment } from 'vue-fragment'
export default {
  name:'box-card-multi-analysis2-shouruqushi',
  components:{Fragment},
  props:{
    items:{
      type:Array
    },
    title:{
      type:String
    }
  },
  data(){
    return{
      curId:0,
    }
  },
  mounted(){
    this.makeData()

  },
  methods:{
    changeTab(id){
      this.curId=id
    },

    makeData(){

      // 门诊总收入
      let label = ['1月','2月',"3月","4月","5月","6月","7月","8月",'9月','10月','11月','12月']
      let data4 = [100, 402, 234, 291, 240, 130, 220,331,352,272,333,144]
      const option4 =  {
          tooltip : {
              trigger: 'axis'
          },
          calculable : true,
          xAxis : [
              {
                  type : 'category',
                  boundaryGap : false,
                  data : label,
                  axisLabel: {
                      show: true,
                      textStyle: {
                          color: '#aaaaaa'
                      }
                  }
              }
          ],
          yAxis : [
              {
                  type : 'value',
                  interval:100,
                  splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#233653'
                    },
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "#233653"
                    }

                },
                axisLabel:{
                  textStyle:{
                    color:'#aaaaaa'
                  }
                }
              }
          ],
          grid: {
              top: '10%',
              left: '8%',
              right: '10%',
              bottom: '10%',
              // containLabel: true
          },
          series : [
            
              {
                  name:'预购',
                  type:'line',
                  smooth:true,
                  itemStyle: {normal: {areaStyle: {type: 'default',color:'#04273C'},lineStyle: {color: '#025E85'}}},
                  data:data4,
              }
            
          ]
      }
      this.makeGraph(this.$refs.revenueTrendStatistics1,option4)


      // 门诊现金总收入
      let data5 = [110, 432, 234, 291, 240, 130, 220,331,352,272,333,144]
      const option5 =  {
          tooltip : {
              trigger: 'axis'
          },
          calculable : true,
          xAxis : [
              {
                  type : 'category',
                  boundaryGap : false,
                  data : label,
                  axisLabel: {
                      show: true,
                      textStyle: {
                          color: '#aaaaaa'
                      }
                  }
              }
          ],
          yAxis : [
              {
                  type : 'value',
                  interval:100,
                  splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#233653'
                    },
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "#233653"
                    }

                },
                axisLabel:{
                  textStyle:{
                    color:'#aaaaaa'
                  }
                }
              }
          ],
          grid: {
              top: '10%',
              left: '8%',
              right: '10%',
              bottom: '10%',
              // containLabel: true
          },
          series : [
            
              {
                  name:'预购',
                  type:'line',
                  smooth:true,
                  itemStyle: {normal: {areaStyle: {type: 'default',color:'#04273C'},lineStyle: {color: '#025E85'}}},
                  data:data5,
              }
            
          ]
      }
      this.makeGraph(this.$refs.revenueTrendStatistics2,option5)


      // 门诊医保总收入
      let data6 = [120, 422, 234, 291, 240, 130, 220,331,352,272,333,144]
      const option6 =  {
          tooltip : {
              trigger: 'axis'
          },
          calculable : true,
          xAxis : [
              {
                  type : 'category',
                  boundaryGap : false,
                  data : label,
                  axisLabel: {
                      show: true,
                      textStyle: {
                          color: '#aaaaaa'
                      }
                  }
              }
          ],
          yAxis : [
              {
                  type : 'value',
                  interval:100,
                  splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#233653'
                    },
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "#233653"
                    }

                },
                axisLabel:{
                  textStyle:{
                    color:'#aaaaaa'
                  }
                }
              }
          ],
          grid: {
              top: '10%',
              left: '8%',
              right: '10%',
              bottom: '10%',
              // containLabel: true
          },
          series : [
            
              {
                  name:'预购',
                  type:'line',
                  smooth:true,
                  itemStyle: {normal: {areaStyle: {type: 'default',color:'#04273C'},lineStyle: {color: '#025E85'}}},
                  data:data6,
              }
            
          ]
      }
      this.makeGraph(this.$refs.revenueTrendStatistics3,option6)

      // 入院总收入
      let data7 = [130, 412, 234, 291, 240, 130, 220,331,352,272,333,144]
      const option7 =  {
          tooltip : {
              trigger: 'axis'
          },
          calculable : true,
          xAxis : [
              {
                  type : 'category',
                  boundaryGap : false,
                  data : label,
                  axisLabel: {
                      show: true,
                      textStyle: {
                          color: '#aaaaaa'
                      }
                  }
              }
          ],
          yAxis : [
              {
                  type : 'value',
                  interval:100,
                  splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#233653'
                    },
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "#233653"
                    }

                },
                axisLabel:{
                  textStyle:{
                    color:'#aaaaaa'
                  }
                }
              }
          ],
          grid: {
              top: '10%',
              left: '8%',
              right: '10%',
              bottom: '10%',
              // containLabel: true
          },
          series : [
            
              {
                  name:'预购',
                  type:'line',
                  smooth:true,
                  itemStyle: {normal: {areaStyle: {type: 'default',color:'#04273C'},lineStyle: {color: '#025E85'}}},
                  data:data7,
              }
            
          ]
      }
      this.makeGraph(this.$refs.revenueTrendStatistics4,option7)
    },
    makeGraph(ref,option){
      let myChart=echarts.init(ref)
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
.left{float: left;}
.right{float: right;}
.borderBottom-1px{
  border-bottom: .01rem solid #7787C7 ;
}
.borderBottom-2px{
  border-bottom: .02rem solid #7787C7 ;
}
.head-wrap{
    font-size: .16rem;
    color:#ffffff;
    overflow: hidden;
    .title{
      height: .26rem;
      line-height: .262rem;
    }
    .operate{
      span{
        height: .26rem;
        line-height: .26rem;
        display: inline-block;
        cursor: pointer;
        background: url('~@/assets/images/671.png') no-repeat center center;
        background-size: contain;
        padding: 1px .1rem;
        font-size: .11rem;
      }
      span.active{
        background: url('~@/assets/images/670.png') no-repeat center center;
        background-size: contain;
        padding: 1px .1rem;
      }
    }
  }
  .content-wrap{
    width: 100%;
    height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
    .chart-content{
      width: 100%;
      height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
      float: left;
      overflow: hidden;
    }
  }
  img{width: 100%;float: left;}
</style>